<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/index.js"></script>
<script src="js/fontawesome-all.js"></script>

<!--导航-->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#"><img src="images/logo.png" ></a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenav" >
       <span class="navbar-toggler-icon"></span>
   </button>
    <div class="collapse navbar-collapse " id="collapsenav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#home">测试</a></li>
            <li class="nav-item"><a class="nav-link" href="#">测试</a></li>
            <li class="nav-item"><a class="nav-link" href="#">测试</a></li>
            <li class="nav-item"><a class="nav-link" href="#">测试</a></li>
            <li class="nav-item dropdown">
                <!--aria-haspopup="true" aria-expanded="false"-->
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" >
                下拉
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">下拉1</a>
                <a class="dropdown-item" href="#">下拉2</a>
                <a class="dropdown-divider" href="#"></a>
                <a class="dropdown-item" href="#">下拉3</a>
            </div>
            </li>
        </ul>
    </div>
</nav>
<!--导航-->
<!--滚动图片-->
<div id="slides" class="carousel slide" data-ride="carousel" >
    <div class="carousel-indicators">
        <li  data-target="#slides" data-slide-to="0" class="active"></li>
        <li  data-target="#slides" data-slide-to="1" ></li>
        <li  data-target="#slides" data-slide-to="2" ></li>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/488.jpg" >
            <div class="carousel-caption">
                <h1>大标题测试</h1>
                <h3>小标题测试</h3>
                <button type="button" class="btn btn-outline-light btn-lg">按钮测试</button>
                <button type="button" class="btn btn-primary btn-lg">按钮测试</button>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/020.jpg" >
        </div>
        <div class="carousel-item">
            <img src="images/149.jpg" >
        </div>
    </div>
</div>
<!--滚动图片-->
<div class="container-fluid padding">
    <div class="row jumbotron">
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
            <p class="lead">这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
            <a href="#"><button type="button" class="btn btn-outline-secondary btn-lg" onclick="test()">测试按钮</button></a>
        </div>
    </div>
</div>
<hr>

<div class="container-fluid padding">

    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <img class="card-img-top" src="images/team1.png" alt="no images">
                <div class="card-body">
                    <h4 class="card-title">团队1</h4>
                    <p class="card-text">好的这是卡片测试内容</p>
                    <a href="#" class="btn btn-outline-primary">查看详情</a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <img class="card-img-top" src="images/team2.png" alt="no images">
                <div class="card-body">
                    <h4 class="card-title">团队2</h4>
                    <p class="card-text">卡片测试内容2测试所测试测试</p>
                    <a href="#" class="btn btn-outline-primary">查看详情</a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <img src="images/team3.png" alt="no images" class="card-img-top">
                <div class="card-body">
                    <h4 class="card-title">团队3</h4>
                    <p class="card-text">卡片测试内容2测试所测试测试</p>
                    <a href="#" class="btn btn-outline-primary">查看详情</a>
                </div>
            </div>
        </div>
    </div>
    <hr class="my-4">
</div>


<div class="container-fluid padding">

    <div class="row">
        <div class="col-12 text-center">
            <h2>测试标题</h2>
        </div>
        <div class="col-12 text-center social">
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-google-plus-g"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
    </div>
</div>

<footer>
<div class="container-fluid text-center padding">
    <div class="row">
        <div class="col-md-4">
            <img src="images/logo.png" alt="no image">
            <hr class="light">
            <p>111-111-111</p>
            <p>test@test.com</p>
            <p>sichuan</p>
        </div>

        <div class="col-md-4">
            <hr class=" light">
           <h3>test1</h3>
            <hr class=" light">
            <p>111-111-111</p>
            <p>test@test.com</p>
            <p>sichuan</p>
        </div>

        <div class="col-md-4">
            <hr class=" light">
            <h3>test2</h3>
            <hr class=" light">
            <p>111-111-111</p>
            <p>test@test.com</p>
            <p>sichuan</p>
        </div>
        <div class="col-12">
            <hr class="light-100">
            <h5>&copy;lgdong.xyz</h5>
        </div>
    </div>
</div>

</footer>


</body>
</html>